
import React from 'react' //创建Vdom(一个普通的js对象)
import ReactDom from 'react-dom' //把Vdom渲染在真实的dom
import Div from './div.js'


//react 创建节点（react元素）（一个普通的js对象->VDom）
/* let nodeObj = React.createElement("div",//标签名
                                   {id:"test"},//元素中的属性
                                   'hello react' //子元素 
                                  ) */
/* let nodeObj = React.createElement(
                                  "div",
                                  {id:"test2"},
                                React.createElement("p",null,"hello react"),
                                React.createElement("p",null,"hello react2"),
                                ) */
 //第二种创建节点的方法 jsx:  createElement的语法糖
 /*jsx语法注意点
      1  不能加引号
      2 在jsx中嵌入表达式 {表达式} 不能使用语句
      3 jsx必须有一个根元素
      4  标签一定要闭合
      5 在jsx中属性可以使用引号 或者 嵌入{表达式} 表达式不要加引号 
      6  内联样式表的使用 {{样式}}
      7 jsx : 当标签为小写时 jsx就会查找与html相同的标签
              当标签为大写时  jsx找组件是的值
      
 */
/* let nodeObj =(<div>
               <p>hello react1</p>
               <p>hello react2</p>
              </div>) */
 /* let content1="你好，react"
  let msg = "hello,jsx" 
  function test(){
      return "test函数"
  } 

  let id="testpppp";

  let person = {name:"小张",age:18,dog:{"name":"花花"}}    
  
let nodeObj =( <>
                <Div></Div>
                <p id='testJsx' className='classJsx'>{content1}</p>
                <p id={id}>{msg}</p>
                <p style={{color:'red',fontSize:"20px"}}>{1+10}</p>
                <p>{10>5?"大于":"小于"}</p>
                <p>{test()}</p>
                <p>{person.name}----{person.dog.name}</p>
                </>
               ) */

// 把react元素渲染为真实的Dom
/* ReactDom.render(
     nodeObj, //需要渲染的节点
     document.getElementById("root")
     ) */

     /* function tick() {
      const element = (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
      );
      //vdom的diff的算法 
      console.log(element)
      ReactDom.render(element, document.getElementById('root'));
    }
    
    setInterval(tick, 1000); */